<template>
  <view class="meter-detail">
    <view class="detail-item">
      <text class="label">当前热表数(kWh)：</text>
      <text class="value">{{ data.currentReading || '1836.20' }}</text>
    </view>
    <view class="detail-item">
      <text class="label">累计耗热量(kWh)：</text>
      <text class="value">{{ data.totalUsage || '1225.00' }}</text>
    </view>
    <view class="detail-item">
      <text class="label">热功率(kw)：</text>
      <text class="value">{{ data.power || '251.00' }}</text>
    </view>
    <view class="detail-item">
      <text class="label">热费统计(元)：</text>
      <text class="value">¥{{ data.fee || '235.00' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MeterDetail',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.meter-detail {
  padding: 20rpx 30rpx;
  
  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #666;
      width: 240rpx;
    }
    
    .value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }
}
</style>